<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>14_小案例</title>

  <style>
    * { 
      font-family: Arial; 
      font-size: 14px; 
      margin: 0; 
      padding: 0; 
      border: none; 
    }
    a { text-decoration: none; }
    ul { list-style: none; }

    /* ,并列选择器 */
    html,body{
      width: 100%;
      height: 100%;
      background-image: url('../images/bg.jpg');
      /* 背景照片不重复 */
      background-repeat: no-repeat;
      /* 让整个背景照片充满整个视口 */
      background-size: cover;
    }
    .page-header{
      height: 70px;
      background-color: rgba(0, 0, 0, 0.7);
      padding: 20px;
      display: flex;
      /* 项目与项目之间距离相等，项目与边缘没有距离  项目两边对齐 */
      justify-content: space-between;

      /* 项目垂直居中 */
      align-items: center;
    }
    .header-nav {
      display: flex;
    }

    /* 子代选择器 */
    .header-nav li a {
      color: white;
      font-size: 20px;
      border: 1px solid white;
      border-radius: 8px;
      padding: 10px;
      margin-right: 20px;
    }

    /* .header-nav类下找到最后一个a元素*/
    .header-nav li:last-child a{
      margin-right: 0px;
    }
    .page-content{
      /* 父元素开启弹性布局 */
      display: flex;
      height: calc(100vh - 70px);
    }
    .content-nav{
      width: 1000px;
      height: 300px;
      /* 父元素开启弹性布局后，本元素可以垂直水平居中  前提父元素有高度值 */
      margin: auto;
      display: flex;
      /* 项目与项目之间有间距 */
      justify-content: space-evenly;

      align-items: center;
      flex-wrap: wrap;
    }
    .content-nav .item{
      width: 180px;
      height: 200px;
      display: flex;
      /* 调整主轴方向，使图片与span标签以两行分布 */
      flex-direction: column;
      /* 侧轴对齐方式 */
      align-items: center;
      justify-content: space-evenly;
      transition: 0.2s linear;
      cursor: pointer;
    }
    .content-nav .item:hover{
        box-shadow: 0px 0px 20px black;
    }
    .content-nav .item span{
      font-size: 20px;
      color: white;
    }
    .content-nav .item:nth-child(1){
      background-color: #595CA8;
    }
    .content-nav .item:nth-child(2){
      background-color: #FF9D2E;
    }
    .content-nav .item:nth-child(3){
      background-color: #01A6DE;
    }
    .content-nav .item:nth-child(4){
      background-color: #015E91;
    }
    .content-nav .item:nth-child(5){
      background-color: #1DC128;
    }
    

  </style>
</head>
<body>
  <header class="page-header">
    <a href="#">
      <img src="../images/logo.png" alt="logo">
    </a>
    <ul class="header-nav">
      <li><a href="#">国内校区</a></li>
      <li><a href="#">缅甸校区</a></li>
      <li><a href="#">国内校区</a></li>
      <li><a href="#">国内校区</a></li>
    </ul>
  </header>
  <div class="page-content">
    <div class="content-nav">
      <div class="item">
        <img src="../images/item1.png" alt="logo">
        <span>我的邮箱</span>
      </div>
      <div class="item">
        <img src="../images/item2.png" alt="logo">
        <span>云服务</span>
      </div>
      <div class="item">
        <img src="../images/item3.png" alt="logo">
        <span>手机课堂</span>
      </div>
      <div class="item">
        <img src="../images/item4.png" alt="logo">
        <span>微信服务</span>
      </div>
      <div class="item">
        <img src="../images/item5.png" alt="logo">
        <span>在线客服</span>
      </div>


    </div>
  </div>
  
</body>
</html>